<template>
	<view class="page flex-col">
		<view class="block_1 flex-col">
			<view class="top">
				<!-- <view class="top_list"> -->
				<u-swiper :list="list1" height="562rpx" :indicator="true"></u-swiper>
				<!-- </view> -->
				<view class="postion">
					<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
				</view>
			</view>
			<!-- <view class="group_1 flex-col">
				<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
				<div class="banner">
					<div class="uview-banner">
						<u-swiper :list="list4" @change="swiperlist" :autoplay="true" indicatorStyle="right: 20px" height="500rpx"
							:indicator="true">
							<view slot="indicator" class="indicator-num">
								<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list4.length || 0 }}</text>
							</view>
						</u-swiper>
					</div>
				</div>

			</view> -->
			<view class="group_2 flex-col">
				<!-- <text class="text_4">商品名称示范文案</text> -->
				<!-- <text class="paragraph_1">
					{{list.sub_title}}
				</text> -->
				<view class="group_3 flex-row justify-between">
					<view class="text-wrapper_2">
						<text class="text_shnagp">豪华辣子鸡套餐</text>
					</view>
				</view>
				<view class="group_3 flex-row justify-between">
					<view class="text-wrapper_2">
						<text class="text_5_2">麻辣</text>
						<text class="text_5_5s">已售300+</text>
					</view>
					<view class="te_con" style="">
						<text class="text_77">+加入购物车</text>
					</view>
				</view>
				<view class="group_3 flex-row justify-between">
					<view class="text-wrapper_2">
						<!-- <text class="text_55">会员价：</text> -->
						<text class="text_556">￥612.00</text>
						<text class="text_56">¥700</text>
					</view>
				</view>
				<view class="group_3 flex-row justify-between">
					<view class="text-wrapper_2">
						<text class="text_5">惠</text>
						<text class="text_5_5">适用于优惠券,充值卡支付</text>
					</view>
					<!-- <text class="text_7">剩余</text> -->
				</view>
				<view class="group_3 flex-row justify-between">
					<view class="text-wrapper_2">
						<text class="text_5">惠</text>
						<text class="text_5_5">全场9折起</text>
					</view>
				</view>
				<view class="group_op">
					<view class="group_3 flex-row justify-between">
						<view class="text-wrapper_2">
							<image style="width: 30rpx;height: 27rpx;"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2977a112c03ac1a0279f151f570f30943af770f5.png"
								mode=""></image>
							<text class="text_5_5s">常州锅里岩餐厅(武进区永旺广场店)</text>
						</view>
						<view class="te_con_tu" style="">
							<image @tap="call" style="width: 100rpx;height: 100rpx;"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/748f057715394e0bcaa261d35fad1b324a0027d0.png"
								mode=""></image>
							<image @click="addresslist" style="width: 100rpx;height: 100rpx;"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7a8c8b16b7b161bf4ab7fef7ad46d794e76263c9.png"
								mode=""></image>
						</view>
					</view>
					<view class="group_3 flex-row justify-between">
						<view class="text-wrapper_2">
							<image style="width: 30rpx;height: 27rpx;"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/04525716a86efd040172173e545700dc492ca520.png"
								mode=""></image>
							<text class="text_5_5s">江苏省常州市武进区永旺广场2楼</text>
						</view>
					</view>
				</view>
				<!-- <view class="group_34 flex-row justify-between">
					<view class="block_9 flex-col">
						<view class="block_11 flex-row justify-between" style="margin: 0;margin-top: 10upx;">
							<view class="text-wrapper_10">
								<image style="width: 22rpx;height: 22rpx;margin-left: 50%;"
									src="https://niule.qfycloud.com/images/切图 40@2x.png" mode=""></image>
								<text class="text_46">严选品质</text>
								<image style="width: 22rpx;height: 22rpx;margin-left: 80%;"
									src="https://niule.qfycloud.com/images/切图 41@2x.png" mode=""></image>
								<text class="text_46">热销爆款</text>
								<image style="width: 24rpx;height: 24rpx;margin-left: 80%;"
									src="https://niule.qfycloud.com/images/切图 42@2x.png" mode=""></image>
								<text class="text_46">全场包邮</text>
							</view>
						</view>

					</view>
				</view> -->

				<!-- <view class="text_4q">
					兑换地点:
				</view> -->
				<view class="group_4 flex-col"></view>
				<div class="tabs_1 flex-col justify-between">
					<!-- <u-tabs :list="tabsList" lineColor="#0055ff" :activeStyle="{
					  color: '#000000',
					}" :inactiveStyle="{
					  color: '#c2c1c1',
					}" :lineWidth="30" :current="currentTab" @click="onClickTab" /> -->
					<u-sticky>
						<u-tabs :list="tabsList" lineColor="#886cff" :activeStyle="{
								color: '#886cff'
							}" :inactiveStyle="{
								color: '#353535'
							}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
					</u-sticky>
					<!-- <view class="text-wrapper_3 flex-row justify-between">
						<text class="text_8">兑换须知</text>
						<text class="text_9">兑换地点</text>
					</view>
					<view class="image-wrapper_1 flex-row">
						<image class="image_3" referrerpolicy="no-referrer"
							src="/static/lanhu_duihuanxiangqing/pskc6k5l6rgnill9ah256ha7spycod1qs70d99d334-3e9c-4748-ac2c-a34d79c4b1ce.png" />
					</view> -->
				</div>
				<view style="padding: 40rpx 0 0 0 ;" v-for="(im,ix) in contentList" :key="ix">
					<image style="width: 100%;height: 100vh;" :src="im.img" mode="aspectFill"></image>
					<!-- <u-parse :content="list.detail"></u-parse> -->
				</view>
			</view>

			<view class="" style="width: 100; height: 143rpx;">

			</view>
			<view class="group_6 flex-col">
				<view class="footer flex-align">
					<view class="menu" @click="indexlist">
						<image mode="aspectFit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/273e3e03189599f18857d2be6cc576885ab3166a.png">
						</image>
						<text>店铺</text>
					</view>
					<view class="menu">
						<image mode="aspectFit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/c876d05feaaba91aed0305b12f233641776e8bd0.png">
						</image>
						<text>客服</text>
					</view>
					<!-- <view class="menu">
						<image mode="aspectFit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/e04921dea41d1323bb7d5b6fc91349c0d030bd9a.png">
						</image>
						<text>购物车</text>
					</view> -->
					<!-- <view class="btn" @click="btnlist">加入购物车</view> -->
					<view class="btn_n" @click="btnlist">立即下单</view>
				</view>
			</view>

			<image style="position: fixed;bottom: 20%;right: 0;z-index: 999;width: 100rpx;height: 100rpx;"  @click="inviteBtn"
				src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/44ef7c303611a4da4883039606e693e45066d432.png"
				mode=""></image>

			<!-- 去结算-->
			<u-popup :round="20" :closeable="true" :show="selectAlertlist" @close="close3">
				<!-- <con-alert :show="selectAlertlist" @close="close3" > -->
				<!-- <con-alert :show="selectAlertShow" @close="close2" isFooter @click="handSubmit"> -->
				<view class="section" :style="{maxHeight:height,minHeight:'35vh'}">
					<view class="" style="margin-left: 40rpx;margin-top: 20rpx;">
						请选择
					</view>
					<view class="section-1 flex-align">
						<view class="image">
							<image
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/469bedc1ebe632f58719e61a573e6c1d5480578f.png">
							</image>
						</view>
						<view class="detail">
							<view>
								<view class="detail-1" style="margin-top: 40rpx;font-size: 30rpx;">
									辣子鸡
								</view>
								<view class="detail-1" style="margin-top: 20rpx;color: #888888;font-size: 24rpx;">
									库存：85

								</view>
								<view class="detail-1" style="margin-top: 60rpx;">
									<view class="detail-left">
										￥720
									</view>
									<view class="detail-right">
										<u-number-box v-model="value">
											<view slot="minus" class="minus">
												<u-icon name="minus" size="12"></u-icon>
											</view>
											<text slot="input" style="width: 35px;text-align: center;"
												class="input">{{value}}</text>
											<view slot="plus" class="plus">
												<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
											</view>
										</u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="section-2" v-for="(im,ix) in productlist" :key="ix">
						<view class="sub-title">{{im.specificationsName}}</view>
						<view class="tag-list">
							<u-tag v-for="(item2,index2) in im.specValueList" :key="index2"
								:text="item2.specificationsValue" type="warning"
								:bgColor="item2.checked? 'rgba(47, 117, 250, 0.05)': '#EFEFEF'"
								:borderColor="item2.checked ? '#886CFF' : 'rgba(0,0,0,0)'"
								:color="item2.checked ? '#886CFF' : '#333'"
								@click="data_list(im.specValueList, item2,ix)" />
						</view>
					</view>
					<view class="btns" @click="handSubmit">立即购买</view>

					<!-- <view class="btns_s" v-if="less_num == 0">立即报名</view> -->
				</view>
				<!-- </con-alert> -->
			</u-popup>

			<!-- 加入购物车 -->
			<u-popup :round="20" :closeable="true" :show="gouwucheshow" @close="gouwucheclose">
				<view class="section" :style="{maxHeight:height,minHeight:'35vh'}">
					<view class="" style="margin-left: 40rpx;margin-top: 20rpx;margin-bottom: 20rpx;font-weight: 600;">
						购物车
					</view>
					<view class="" style="margin-left: 40rpx;margin-top: 20rpx;margin-bottom: 20rpx;display: flex;flex-direction: row;  justify-content:  space-between ">
						<view class="" style="">
							共50件商品
						</view>
						<view class=""  style="margin-right: 40rpx;" @click="guanli" v-if="jiesuan">
							管理
						</view>
						<view class=""  style="margin-right: 40rpx;" @click="wanc" v-if="shanchu">
							完成
						</view>
					</view>
					<scroll-view scroll-y="true" style="width: 100%;
					max-height: 60vh;
					overflow: hidden;">
						<view class="goods-detail" v-for="(item,index) in goods" :key="index">
							<view class="detail-left">
								<view class="goods-left">
									<checkbox-group @change="selected(item)">
										<label>
											<checkbox class="selected round red" color="#555555" :checked="checked" />
											<text></text>
										</label>
									</checkbox-group>
									<image :src="item.goodsImage" style="width: 150rpx;height: 140rpx;"></image>
								</view>
								<view class="size" style="font-family: Source Han Sans CN-Medium, Source Han Sans CN;">
									<text style="font-size: 25rpx;">商品名称示范文案</text>
									<text style="font-size: 24rpx;font-weight: 400;color: #9E9E9E;">规格示范文案</text>
									<text class="goods-price"
										style="font-size: 36rpx;font-weight: 400;color: #f00;">￥{{item.price}}</text>
									<!-- <view class="goods-price" style="font-size: 20rpx;font-weight: 500;">
										<text style="color: #333333;">乐豆兑换：</text>
										<text style="color: #0E9698;">20098</text>
										<image style="width: 19rpx; height: 17rpx;"
											src="https://niule.qfycloud.com/images/ledou.png" mode=""
											@click="delStudent(item1)">
										</image>
									</view> -->
								</view>
							</view>
							<view class="detail-right">
								<text class="subtract" @click="reduce(item)">-</text>
								<text class="num">{{item.num}}</text>
								<text @click="add(item)" class="add">+</text>
							</view>
						</view>
						<view class="" style="width: 100%;height: 100rpx;">
							
						</view>
					</scroll-view>
					<view class="end" v-if="jiesuan">
						<view class="end-left">
							<checkbox-group @change="selectgoods()">
								<label>
									<checkbox :checked="allchecked" />全选
								</label>
							</checkbox-group>
							<view style="display: inline-block;">
								总计：<text style="color: #f00;font-weight: bold;">￥ {{totalPrice}}</text>
								<!-- <view class=""
									style="font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;">
									<text style="color: #9E9E9E;font-size: 24rpx;">积分：20098</text><text
										style="color: #F98527;font-size: 16rpx;">（积分不足）</text>
								</view> -->
							</view>
						</view>
						<view class="end-right" @click="orderlist">
							结算({{totalNum}})
						</view>


					</view>
					<view class="end" v-if="shanchu">
						<view class="end-left">
							<checkbox-group @change="selectgoods()">
								<label>
									<checkbox :checked="allchecked" />全选
								</label>
							</checkbox-group>
							<view style="display: inline-block;">
								<!-- 总计：<text style="color: #f00;font-weight: bold;">￥ {{totalPrice}}</text> -->
								<!-- <view class=""
									style="font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;">
									<text style="color: #9E9E9E;font-size: 24rpx;">积分：20098</text><text
										style="color: #F98527;font-size: 16rpx;">（积分不足）</text>
								</view> -->
							</view>
						</view>
						<view class="end-right" @click="orderlist">
							删除({{totalNum}})
						</view>
					
					
					</view>
				</view>
				<!-- </con-alert> -->
			</u-popup>
		</view>
	</view>
</template>
<script>
	import conAlert from "@/components/com-alert/com-alert.vue";
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	export default {
		components: {
			conAlert,
			QSNavbar
		},
		data() {
			return {
				jiesuan:true,
				shanchu:false,
				value: 1,
				productlist: [{
						specificationsName: "型号",
						specValueList: [{
								specificationsName: "型号",
								specificationsValue: "深洁牙线",
								id:'1'
							},
							{
								specificationsName: "型号1",
								specificationsValue: "深洁牙线1",
								id:'2'
							}
						]
					},
					{
						specificationsName: "SKU",
						specValueList: [{
								specificationsName: "SKU",
								specificationsValue: "微蜡牙线，50米*1盒",
								id:'11'
							},
							{
								specificationsName: "SKU",
								specificationsValue: "舒适牙线，40米*1盒",
								id:'12'
							},
							{
								specificationsName: "SKU",
								specificationsValue: "劲爽牙线，40米*1盒",
								id:'13'
							}
						]
					}
				],
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "商品详情",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				list4: [{
					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				}],
				banner: [],
				constants: {},
				tabsList: [{
						name: "商品详情"
					},
					// {
					// 	name: "兑换地点"
					// }
				],
				currentTab: 0,
				orderStatus: '',
				jifen: '',
				list: {},
				end_time: '',
				start_time: '',
				time_start: '',
				id: '',
				currentNum: '',
				show: false,
				overlayShow: false,
				selectAlertlist: false, //选择商品 小班
				gouwucheshow: false, //选择商品 小班
				area_list: [],
				data_names: [],
				hour_list: [],
				data_name: [],
				id: '',
				getOnelist: {},
				radios: [{
						checked: true
					},
					{
						checked: false
					},
					{
						checked: false
					}
				],
				getOneBylist: [],
				sku: [],
				skulist: [],
				labelList: "",
				checkedSpec: [],
				labelName: '',
				contentList: [{
					img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/759c43c16264c09e165a381f16a65e54d236ddcb.png'
				}],
				specDetail: null,
				asalist: [],
				asaarr: {},
				pay_labal: "",
				picurl: "",
				codeImg: '',
				show: true,
				allchecked: true,
				checked: true,
				goods: [{
						size: "商品名称示范文案",
						num: 1,
						flag: true,
						price: 149,
						goodsImage: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/df/f3e3705cbb79dcaa070798efc285e3.png?attname=16406643038426087144.png",
					},
					{
						size: "商品名称示范文案",
						num: 1,
						flag: true,
						price: 219,
						goodsImage: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/df/f3e3705cbb79dcaa070798efc285e3.png?attname=16406643038426087144.png",
					},
					{
						size: "商品名称示范文案",
						num: 1,
						flag: true,
						price: 240,
						goodsImage: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/df/f3e3705cbb79dcaa070798efc285e3.png?attname=16406643038426087144.png",
					},
					{
						size: "商品名称示范文案",
						num: 1,
						flag: true,
						price: 410,
						goodsImage: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/df/f3e3705cbb79dcaa070798efc285e3.png?attname=16406643038426087144.png",
					},
					{
						size: "商品名称示范文案",
						num: 1,
						flag: true,
						price: 500,
						goodsImage: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/df/f3e3705cbb79dcaa070798efc285e3.png?attname=16406643038426087144.png",
					},
				],
			};
		},
		onLoad(options) {
			console.log(options, '222')
			// this.mplist()
			
		},
		onShow() {

		},
		computed: {
			totalNum() {
				let totalNum = 0;
				this.goods.map(item => {
					console.log(item,'1212')
					item.flag ? totalNum += item.num : totalNum += 0
				})
				console.log(totalNum,1111)
				return totalNum
			},

			totalPrice() {
				let totalPrice = 0;
				this.goods.map(item => {
					item.flag ? totalPrice += item.num * item.price : totalPrice += 0
				})
				console.log(totalPrice,2222)
				return totalPrice
			}
		},
		methods: {
			wanc(){
				this.jiesuan = true
				this.shanchu = false
			},
			guanli(){
				this.jiesuan = false
				this.shanchu = true
			},
			// 购物车-MP-列表查询
			async mplist() {
				let data = {
					id: this.id,
				}
				let result = await train.mplist(data)
				if (result.data.code == 200) {}
			},
			orderlist() {
				uni.navigateTo({
					url: './commodity_orders'
				})
			},
			goshopping() {
				uni.navigateTo({
					url: '../contact/contact'
				})
			},
			change(e) {},
			// 单选
			selected(item) {
				item.flag = !item.flag
				if (!item.flag) {
					this.allchecked = false

				} else {
					const a = this.goods.forEach((item) => {
						return item.flag === true
					})
					if (a) {
						this.allchecked = true
					} else {
						this.allchecked = false
					}
				}
			},
			// 全选
			selectgoods() {
				this.allchecked = !this.allchecked
				if (this.allchecked) {
					this.goods.map(item => {
						this.checked = true
						item.flag = true
					})
				} else {
					this.checked = false
					this.goods.map(item => {
						item.flag = false
					})
				}
			},
			// 减少
			reduce(item) {
				let num = item.num
				if (num > 1) {
					num -= 1
				} else if (num = 1) {
					uni.showToast({
						title: "该宝贝不能减少了哟~"
					})
				}
				item.num = num
			},
			// 增加
			add(item) {
				let num = item.num
				item.num = num + 1
			},
			inviteBtn() {
				// uni.navigateTo({
				// 	url: './shopping_cart'
				// })
				this.gouwucheshow = true
			},
			gouwucheclose() {
				this.gouwucheshow = false;
			},
			// handSubmit() {
			// 	uni.navigateTo({
			// 		url: './shopping_cart'
			// 	})
			// },
			// 选择规格
			data_list(list, item, index) {
				console.log(list, item, index,'3333')
				let _this = this
				if (list.findIndex(el => el.checked) !== -1) {
					list.forEach(el => {
						this.$set(el, 'checked', false)
					})
				}
				this.$set(item, 'checked', !item.checked)
				// const selectList = this.specificationList()
				// if (selectList && selectList.length >= this.productlist.length) {
				// 	// 点击规格调用数据
				// 	train.getOneBySpec({
				// 		productCode: this.getOnelist.productCode,
				// 		inSpecValueList: this.specificationList(),
				// 		labelName: this.labelName
				// 	}).then(res => {
				// 		if (res.data.code == 200) {
				// 			console.log(res, '222333')
				// 			this.specDetail = res.data.data
				// 		}
				// 	})
				// }
			},
			btnlist() {
				this.selectAlertlist = true;
			},
			close3() {
				this.selectAlertlist = false;
			},
			// 导航地址
			addresslist() {
				uni.openLocation({
					latitude: Number(this.list.lat), //要去的纬度-地址
					longitude: Number(this.list.lng), //要去的经度-地址
					address: this.list.address, //要去的具体地址

					//此处踩坑的问题2：
					//latitude 和 longitude的值一定要是number类型。
					//所以传递的时候需要使用Number将其转换一下。
				})
			},
			// 拨打电话
			call() {
				uni.makePhoneCall({
					phoneNumber: this.list.phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			swiperlist(e) {
				this.currentNum = e.current
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
			},
			indexlist() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
		}
	};
</script>
<style lang='scss'>
	@import '@/static/css/common/common.scss';

	.page {
		position: relative;
		width: 750rpx;
		height: 100%;
		/* overflow: hidden; */

		.block_1 {
			width: 750rpx;
			height: 100%;

			.top {
				position: relative;
				width: 100%;

				.postion {
					position: absolute;
					width: 100%;
					top: 0;
					left: 0;
					box-sizing: border-box;
				}
			}

			.group_1 {
				background-color: rgba(255, 255, 255, 1.0);
				width: 750rpx;
				height: 380rpx;

				.banner {
					position: relative;
					display: flex;
					justify-content: center;
				}

				.uview-banner {
					width: 100%;
					position: absolute;
					z-index: 1;
					/* width: 463rpx; */
					height: 400rpx;
					/* margin: 60rpx 0 0 0; */
					/* top: 10rpx; */
				}

				/* 	.banner::after {
					content: '';
					width: 100%;
					height: 260rpx;
					position: absolute;
					border-radius: 0 0 100% 100%;
					background: #2F75FA;
					box-shadow: 0px 0px 10px 10px rgba(182, 174, 174, 0.75);
					-webkit-box-shadow: 0px 0px 10px 10px rgba(182, 174, 174, 0.75);
					-moz-box-shadow: 0px 0px 10px 10px rgba(182, 174, 174, 0.75);
				} */

			}

			.group_2 {
				width: 750rpx;
				height: 100%;

				.text_4 {
					width: 90%;
					height: 34rpx;
					color: rgba(51, 51, 51, 1);
					font-size: 36rpx;
					font-weight: 700;
					text-align: left;
					line-height: 36rpx;
					margin: 30rpx 0 0 30rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.text_4q {
					color: rgba(0, 85, 255, 1.0);
					font-size: 28rpx;
					font-weight: 600;
					text-align: left;
					margin: 20rpx 0 0 30rpx;
				}

				.paragraph_1 {
					width: 689rpx;
					height: 60rpx;
					overflow-wrap: break-word;
					color: rgba(136, 136, 136, 1);
					font-size: 24rpx;
					font-family: PingFang-SC-Regular;
					font-weight: NaN;
					text-align: left;
					line-height: 36rpx;
					margin: 30rpx 0 0 30rpx;
				}

				.group_34 {
					width: 690rpx;
					height: 52rpx;
					margin: 20rpx 0 0 31rpx;
					background: #F6F6F6;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					line-height: 52rpx;


					.block_9 {
						width: 750rpx;
						height: auto;

						.image_9 {
							width: 654rpx;
							height: 22rpx;
							margin: 33rpx 0 0 48rpx;
						}

						.nav-bar_1 {
							width: 747rpx;
							height: 95rpx;
							margin-top: 28rpx;

							.group_2 {
								height: 37rpx;
								width: 185rpx;
								margin: 30rpx 0 0 30rpx;

								.block_10 {
									width: 185rpx;
									height: 37rpx;

									.icon_1 {
										width: 20rpx;
										height: 37rpx;
									}

									.text_44 {
										width: 146rpx;
										height: 34rpx;
										overflow-wrap: break-word;
										color: rgba(255, 255, 255, 1);
										font-size: 36rpx;
										font-family: PingFang-SC-Regular;
										font-weight: NaN;
										text-align: left;
										white-space: nowrap;
										line-height: 36rpx;
										margin-top: 1rpx;
									}
								}
							}

							.applet-top-bar_1 {
								width: 150rpx;
								height: 55rpx;
								margin: 24rpx 27rpx 0 355rpx;
							}
						}

						.block_11 {
							width: 687rpx;
							height: 41rpx;
							margin: 15rpx 0 20rpx 31rpx;

							.text-wrapper_10 {
								width: 124rpx;
								height: 39rpx;
								overflow-wrap: break-word;
								font-size: 0;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 33rpx;

								.text_45 {
									width: 124rpx;
									height: 39rpx;
									overflow-wrap: break-word;
									color: rgba(255, 255, 255, 1);
									font-size: 50rpx;
									font-family: DIN-Bold;
									font-weight: 700;
									text-align: left;
									white-space: nowrap;
									line-height: 33rpx;
								}

								.text_46 {
									width: 124rpx;
									height: 39rpx;
									overflow-wrap: break-word;
									color: #999999;
									font-size: 24rpx;
									font-family: Source Han Sans CN-Regular, Source Han Sans CN;
									font-weight: 500;
									text-align: left;
									white-space: nowrap;
									line-height: 33rpx;
									margin-left: 6rpx;
								}
							}

							.text_47 {
								width: 86rpx;
								height: 21rpx;
								overflow-wrap: break-word;
								color: rgba(255, 255, 255, 1);
								font-size: 22rpx;
								font-family: PingFang-SC-Medium;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 33rpx;
								margin-top: 20rpx;
							}
						}


					}
				}

				.group_op {
					width: 100%;
					height: 120rpx;
					background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/611f1d96cdbebfa7ebe2adf3422902dbf11b1e30.png') 100% no-repeat;
					background-size: 100% 100%;
					margin-top: 20rpx;
				}

				.group_3 {
					width: 688rpx;
					height: 31rpx;
					margin: 20rpx 0 0 31rpx;

					.text-wrapper_2 {
						width: 117rpx;
						height: 30rpx;
						overflow-wrap: break-word;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 36rpx;

						.text_shnagp {
							width: 70%;
							font-weight: 500;
							text-align: left;
							height: 50rpx;
							font-size: 34rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							color: #333333;
							line-height: 50rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.text_5 {
							width: 117rpx;
							height: 30rpx;
							color: rgba(255, 255, 255, 1.0);
							font-size: 22rpx;
							font-weight: 500;
							text-align: left;
							line-height: 36rpx;
							padding: 5rpx 10rpx;
							background: #FF0F0F;
							border-radius: 30rpx;
						}

						.text_5_2 {
							width: 117rpx;
							height: 30rpx;
							color: rgba(0, 0, 0, 1.0);
							font-size: 22rpx;
							font-weight: 500;
							text-align: left;
							line-height: 36rpx;
							padding: 5rpx 10rpx;
							background: #F3F3F3;
						}

						.text_5_5 {
							width: 158rpx;
							height: 28rpx;
							font-size: 22rpx;
							font-weight: 500;
							color: #333333;
							line-height: 28rpx;
							margin-left: 10rpx;
						}

						.text_5_5s {
							width: 158rpx;
							height: 28rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #888888;
							line-height: 28rpx;
						}

						.text_55 {
							width: 117rpx;
							height: 30rpx;
							overflow-wrap: break-word;
							color: #333333;
							font-size: 24rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 36rpx;
						}

						.text_556 {
							width: 117rpx;
							height: 30rpx;
							overflow-wrap: break-word;
							color: #FF4105;
							font-size: 36rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 36rpx;
						}

						.text_6 {
							width: 117rpx;
							height: 30rpx;
							overflow-wrap: break-word;
							color: rgba(245, 64, 41, 1);
							font-size: 24rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;

						}

						.text_56 {
							width: 117rpx;
							height: 30rpx;
							overflow-wrap: break-word;
							font-size: 24rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
							color: #9E9E9E;
							text-decoration: line-through;
							margin-left: 20rpx;
						}
					}

					.te_con {
						text-align: center;
						width: 180rpx;
						height: 50rpx;
						background: #886CFF;
						border-radius: 10rpx;

						.text_77 {
							text-align: center;
							line-height: 50rpx;
							width: 148rpx;
							height: 26rpx;
							font-size: 26rpx;
							color: #FFFFFF;
						}
					}

					.te_con_tu {
						text-align: center;
						width: 210rpx;
						height: 50rpx;
						border-radius: 10rpx;
					}



					.text_7 {
						width: 154rpx;
						height: 25rpx;
						overflow-wrap: break-word;
						color: rgba(190, 190, 190, 1);
						font-size: 26rpx;
						font-family: PingFang-SC-Regular;
						font-weight: NaN;
						text-align: right;
						white-space: nowrap;
						line-height: 34rpx;
						margin-top: 6rpx;
					}
				}

				.group_4 {
					background-color: rgba(243, 243, 243, 1);
					width: 750rpx;
					height: 20rpx;
					margin-top: 29rpx;
				}

				.tabs_1 {
					height: 55rpx;
					width: 100%;

					/* margin: 29rpx 0 0 31rpx; */
					/deep/.u-tabs {
						background-color: #fff;
						border-bottom: 1px solid #E5E5E5;
						margin: 0 30rpx;

						.u-tabs__wrapper__nav__item {
							flex: 1;
						}

						.u-tabs__wrapper__nav__line {
							bottom: 0;
						}
					}

					.text-wrapper_3 {
						width: 252rpx;
						height: 27rpx;

						.text_8 {
							width: 109rpx;
							height: 27rpx;
							overflow-wrap: break-word;
							color: rgba(1, 109, 255, 1);
							font-size: 28rpx;
							font-family: PingFang-SC-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 28rpx;
						}

						.text_9 {
							width: 102rpx;
							height: 25rpx;
							overflow-wrap: break-word;
							color: rgba(153, 153, 153, 1);
							font-size: 26rpx;
							font-family: PingFang-SC-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 26rpx;
							margin-top: 2rpx;
						}
					}

					.image-wrapper_1 {
						width: 58rpx;
						height: 8rpx;
						margin: 20rpx 0 0 25rpx;

						.image_3 {
							width: 58rpx;
							height: 8rpx;
						}
					}
				}
			}

			.group_s {
				height: 2464rpx;
				margin-top: -1rpx;
				width: 750rpx;
			}

			.group_6 {
				width: 750rpx;
				height: 143rpx;
				position: fixed;
				bottom: 1rpx;
				background-color: #FFFFFF;

				.footer {
					position: fixed;
					width: 100%;
					background-color: white;
					bottom: 0;
					left: 0;
					padding: 20rpx 25rpx 20rpx 25rpx;
					box-sizing: border-box;

					.menu {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-right: 40rpx;

						image {
							width: 35rpx;
							height: 35rpx;
						}

						text {
							color: rgb(51, 51, 51);
							font-size: 24rpx;
							font-weight: 700;
							margin-top: 13rpx;
						}
					}

					.btn {
						flex: 1;
						color: rgb(255, 255, 255);
						padding: 26rpx 0;
						border-radius: 60rpx 0 0 60rpx;
						background-color: rgba(0, 85, 255, 1.0);
						text-align: center;
						font-weight: 700;
						font-size: 24rpx;
					}

					.btn_n {
						flex: 1;
						color: rgb(255, 255, 255);
						font-size: 24rpx;
						padding: 26rpx 0;
						border-radius: 60rpx 60rpx 60rpx 60rpx;
						background-color: #886CFF;
						text-align: center;
						font-weight: 700;
					}
				}
			}

			.popup {
				height: 480upx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.share-list {
					outline: none;
					background: transparent;
					border: none;
					padding: 0;
					margin: 0;

					&::after {
						display: none;
					}

					image {
						width: 128upx;
						height: 128upx;
						border-radius: 50%;
					}

					view {
						font-size: 24upx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}

					text-align: center;

				}
			}

			.overlay-wrap {
				width: 560rpx;
				height: fit-content;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;

				.overlay-content {
					width: 100%;
					height: 780upx;
					background: #FFFFFF;
					border-radius: 28upx 28upx 28upx 28upx;
					margin-bottom: 60upx;
					overflow: hidden;

					.picture {
						height: 560upx;
					}

					.share-content {
						height: 220upx;
						display: flex;
						align-items: center;

						.desc {
							flex: 1;
							margin: 0 24upx;

							.text_5 {
								width: 117rpx;
								height: 30rpx;
								color: rgba(0, 0, 0, 1.0);
								font-size: 20rpx;
								font-weight: 500;
								text-align: left;
								line-height: 36rpx;
							}

							.text_5_5 {
								width: 158rpx;
								height: 28rpx;
								font-size: 20rpx;
								font-weight: 500;
								color: #0E9698;
								line-height: 28rpx;
							}

							.text_55 {
								/* width: 117rpx; */
								/* height: 30rpx; */
								overflow-wrap: break-word;
								color: #333333;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 36rpx;
							}

							.text_556 {
								/* width: 117rpx; */
								/* height: 30rpx; */
								overflow-wrap: break-word;
								color: #F98527;
								font-size: 36rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 36rpx;
							}

							.text_6 {
								/* width: 117rpx; */
								/* height: 30rpx; */
								overflow-wrap: break-word;
								color: rgba(245, 64, 41, 1);
								font-size: 24rpx;
								font-family: PingFang-SC-Medium;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 24rpx;

							}

							.text_56 {
								width: 117rpx;
								height: 30rpx;
								overflow-wrap: break-word;
								font-size: 24rpx;
								font-family: PingFang-SC-Medium;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 24rpx;
								color: #9E9E9E;
								text-decoration: line-through;
								margin-left: 20rpx;
							}
						}

						image {
							width: 138upx;
							height: 138upx;
							border-radius: 50%;
							margin-right: 24upx;
						}
					}
				}

				.saveBtn {
					width: 440upx;
					height: 88upx;
					line-height: 88upx;
					background: #886CFF;
					margin: 0 auto;
					text-align: center;
					border-radius: 80upx;
					font-size: 28upx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;

					&:active {
						opacity: 0.9;
					}
				}
			}

			.section {

				.btns {
					background: linear-gradient(0deg, #886CFF, #886CFF);
					border-radius: 40px;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					padding: 26rpx 0;
					margin: 0px 70rpx;
					margin-top: 40rpx;
					text-align: center;
					margin-bottom: 30rpx;
				}

				.btns_s {
					background: linear-gradient(0deg, #bebebe, #bebebe);
					border-radius: 20px;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					padding: 26rpx 0;
					margin: 10rpx 30rpx;
					margin-top: 120rpx;
					text-align: center;
				}

				.btns_ms {
					// position: absolute;
					// right: 10rpx;
					// top: 110rpx;
					margin-left: 65%;
				}

				.btns_m {
					background: linear-gradient(0deg, #528EFF, #2F75FA);
					border-radius: 5px;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					padding: 26rpx 0;
					width: 160rpx;
					height: 60rpx;
					text-align: center;
					line-height: 12rpx;

				}

				.btns_s {
					background: linear-gradient(0deg, #bebebe, #bebebe);
					border-radius: 20px;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					padding: 26rpx 0;
					margin: 0px 30rpx;
					margin-top: 120rpx;
					text-align: center;
				}

				.section-1 {
					height: 250rpx;

					.image {
						width: 210rpx;
						height: 210rpx;
						/* margin-right: 26rpx; */
						border-radius: 10rpx;
						overflow: hidden;
						margin-left: 30rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.detail {
						flex: 1;
						width: 0;
						display: flex;
						height: 100%;
						flex-direction: column;
						justify-content: space-between;

						.detail-1 {
							margin-top: 10rpx;
							margin-left: 20rpx;
							font-size: 20rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							line-height: 28rpx;
							display: flex;
							flex-direction: row;
							justify-content: space-between;


							.detail-left {
								width: 98rpx;
								height: 27rpx;
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #FF0000;
								margin-top: 25rpx;
							}

							.detail-right {
								margin-right: 30rpx;
								font-size: 30rpx;
								margin-top: 10rpx;

								.minus {
									width: 26px;
									height: 26px;
									border-width: 1px;
									border-color: #E6E6E6;
									border-style: solid;
									border-top-left-radius: 100px;
									border-top-right-radius: 100px;
									border-bottom-left-radius: 100px;
									border-bottom-right-radius: 100px;
									@include flex;
									justify-content: center;
									align-items: center;
									font-size: 30rpx;
								}

								.input {
									padding: 0 10px;
									font-size: 35rpx	;
								}

								.plus {
									width: 26px;
									height: 26px;
									background-color: #FF0000;
									border-radius: 50%;
									/* #ifndef APP-NVUE */
									display: flex;
									/* #endif */
									justify-content: center;
									align-items: center;
									font-size: 30rpx;
								}
							}
						}

						.detail-2 {
							font-size: 24rpx;
							font-weight: 500;
							color: #888888;
							margin-top: 12rpx;
						}

						.price {
							font-size: 20rpx;
							font-weight: 500;
							color: #ff0000;

							text {
								font-size: 32rpx;
								font-weight: 700;
							}
						}
					}
				}

				.section-2 {
					padding: 0 20rpx;
					margin-top: 50rpx;

					.top-menu-list {
						display: flex;
						flex-wrap: wrap;

						.top-menu-item {
							display: flex;
							flex-direction: column;
							align-items: center;
							width: 20%;
							/* // margin-top: 10rpx; */
							padding: 0px 30rpx;
							box-sizing: border-box;
							font-size: 25rpx;

							.add_na {
								display: flex;
								flex-direction: column;
								align-items: center;
								width: 20%;
								/* // margin-top: 30rpx; */
								padding: 0px 30rpx;
								box-sizing: border-box;
								font-size: 25rpx;

								.menu-image {
									width: 100rpx;
									height: 100rpx;
									/* // border-radius: 37rpx;
									// background: rgb(250, 237, 234);
									// background: linear-gradient(45deg,
									// 		rgba(250, 237, 234, 1) 0%,
									// 		rgba(246, 227, 216, 1) 77%); */
									background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/60cb40ff572199778113a809978ef6aa0f09db36.png') 100% no-repeat;
									background-size: 100% 100%;
									/* // position: absolute; */
									/* // top: 0; */
									/* // right: 0; */
									/* // z-index: 999; */
									display: flex;
									justify-content: center;
									align-items: center;

									image {
										width: 60rpx;
										height: 60rpx;
									}
								}

								.menu-image-no-checked {
									width: 100rpx;
									height: 100rpx;
									display: flex;
									justify-content: center;
									align-items: center;

									image {
										width: 60rpx;
										height: 60rpx;
									}
								}

								.no-checked-text {
									white-space: nowrap;
								}

								.checked-text {
									margin-top: 20rpx;
									white-space: nowrap;
									font-weight: bold;
								}
							}
						}
					}

					.sub-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
						margin-bottom: 20rpx;
					}



					.tag-list {
						display: flex;
						flex-wrap: wrap;

						/deep/.u-tag {
							margin-left: 30rpx;
							margin-bottom: 30rpx;
						}
					}
				}

				.section-3 {
					font-size: 22rpx;
					font-weight: 500;
					color: #333333;
				}

				/* 购物车 */
				.goods {
					line-height: 80rpx;
					background-color: #FFFFFF;

					&-detail {
						display: flex;
						padding: 30rpx 15rpx 30rpx 30rpx;
						background-color: #fff;
						justify-content: space-between;
						border-bottom: 5rpx solid #F1F1F1;
						align-items: center;

						.detail-left {
							display: flex;

							.goods-left {
								display: flex;
								align-items: center;
							}
						}

						.size {
							display: flex;
							justify-content: space-around;
							flex-direction: column;
							margin-left: 30rpx;

							.goods-price {
								font-size: 25rpx;
								color: #F44545;

							}
						}

						.detail-right {
							font-size: 30rpx;
							text {
								width: 50rpx;
								line-height: 50rpx;
								text-align: center;
								display: inline-block;
								background-color: #F7F7F7;
								// margin-right: 10rpx;
							}

							.add {
								border-radius: 0rpx 30rpx 30rpx 0rpx;
								margin-right: 20rpx;
								font-size: 34rpx;
								color: #D8D8D8;
							}

							.subtract {
								border-radius: 30rpx 0rpx 00rpx 30rpx;
								font-size: 34rpx;
								color: #D8D8D8;
							}
						}
					}
				}

				.empty {

					position: relative;
					top: 220rpx;
					text-align: center;
					display: flex;
					align-items: center;
					flex-direction: column;

					&-text {
						color: #808080;
						margin-bottom: 50rpx;
					}

					&-button {
						width: 300rpx;
						height: 90rpx;
						color: orange;
						border: 1rpx solid orange;
						text-align: center;
						line-height: 90rpx;
						border-radius: 48rpx;
					}
				}

				.end {
					width: 100%;
					height: 160rpx;
					background-color: #fff;
					position: fixed;
					bottom: 0rpx;
					left: 0;
					display: flex;
					align-items: center;

					&-left {
						width: 70%;
						display: flex;
						justify-content: space-between;
						padding: 0 30rpx;

						.end-flex {
							display: flex;
							align-items: center;
						}
					}

					&-right {
						width: 30%;
						line-height: 90rpx;
						background-color: #886CFF;
						text-align: center;
						color: #fff;
						border-radius: 484rpx 484rpx 484rpx 484rpx;
						opacity: 1;
					}
				}

				/* 复选框未选中前的样式 */
				/deep/ .uni-checkbox-input {
					width: 36upx;
					height: 36upx;
					border-radius: 50%;
					margin-right: 0;
					border: 1px solid #888888;
				}
				

				/* 复选框取消默认样式 */
				/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
					font: normal normal normal 14px/1 uni;
					content: "EA08";
					font-size: 0;
					/* 重点使用这一步取消的默认样式 */
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -48%) scale(1);
					-webkit-transform: translate(-50%, -48%) scale(1);
				}

				/* 重新定义复选框选中后的样式*/
				/deep/ .uni-checkbox-input-checked::before {
					width: 19px;
					height: 19px;
					background: #ff0000;
					border-radius: 50%;
					/* background: url(../../static/img/seal.png) no-repeat center; */
					//选中图标
				}
				
			}
		}
	}
</style>